<script lang="ts" setup>
import { useRoute } from 'vue-router';
import SubmitProject from './components/submitProject.vue';
import Certificate from './components/certificate.vue';
import ReplayCourse from './components/replayCourse.vue';
import NormalHeader from "@/components/NormalHeader.vue";
import router from '@/router';
const routeData = useRoute(); // 使用 useRoute 获取当前路由对象
const coursesTag: string | undefined = routeData.params.coursesTag as string;
// 跳转到个人中心
const backToLastPage = () => {
  router.back();
}
</script>

<template>
  <a-layout-content>
    <NormalHeader title="训练营详情" />
    <div class="content-box">
      <h2 class="content-title">
        课程回放
      </h2>
      <a-button type="primary" style="margin-right: 1.5rem;font-size: 1rem;" @click="backToLastPage">
        返回
      </a-button>
    </div>

    <ReplayCourse
      :courses-tag="coursesTag"
      class="content-box"
    />
    <h2 class="content-title">
      作业提交
    </h2>
    <SubmitProject class="content-box" />
    <h2 class="content-title">
      结营证书
    </h2>
    <Certificate class="content-box" />
    <div style="height: 10vh;" />
  </a-layout-content>
</template>

<style scoped lang="scss">
.content-box {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  justify-content: space-between;
}
.app-sider {
  background: #fff;
}

.content-box {
  margin-bottom: 0rem;
}

.content-title {
  font-size: 1.5rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  margin-left: 1rem;
}

.ant-table {
  width: 100%;
}

.ant-btn {
  font-size: 0.875em;
}
</style>
